<template>
    <div class="user-list-container">
        <el-radio-group v-model="searchForm.state" style="margin-bottom: 20px;">
            <el-radio-button label="0">待审批</el-radio-button>
            <el-radio-button label="1">已审批</el-radio-button>
        </el-radio-group>

        <div class="search-area">
            <el-input v-model="searchForm.MeetingTheme" placeholder="请输入会议主题" clearable></el-input>
            <el-input v-model="searchForm.RoomName" placeholder="请输入会议室名称" clearable></el-input>
            <el-date-picker type="date" placeholder="请选择会议日期"></el-date-picker>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
        </div>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="roomName" label="会议室" width="180" />
            <el-table-column prop="meetingTheme" label="会议主题" />
            <el-table-column prop="compere" label="主持人" width="120" />
            <el-table-column prop="beginTime" label="开始时间">
                <template #default="scope">
                    {{ moment(scope.row.beginTime).format("YYYY-MM-DD HH:mm") }}
                </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间">
                <template #default="scope">
                    {{ moment(scope.row.endTime).format("YYYY-MM-DD HH:mm") }}
                </template>
            </el-table-column>
            <el-table-column prop="attendance" label="参会人数" width="100" />
            <el-table-column prop="submissionTime" label="提交时间">
                <template #default="scope">
                    {{ moment(scope.row.submissionTime).format("YYYY-MM-DD HH:mm") }}
                </template>
            </el-table-column>
            <el-table-column prop="result" label="审批结果" width="120" v-if="searchForm.state === '1'">
                <template #default="scope">
                    <el-button type="primary" v-if="scope.row.result == '1'" round>通过</el-button>
                    <el-button type="warning" v-else-if="scope.row.result == '2'" round>退回</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="scope">
                    <el-link type="success" v-if="scope.row.status == 0"
                        @click="handleApprove(scope.row)">会议审批</el-link>
                    <el-link type="success" v-if="scope.row.status == 1"
                        @click="handleViewDetails(scope.row)">查看详细</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 会议详情对话框 -->
        <el-dialog title="会议详情" v-model="dialogVisible" width="600px">
            <div>
                <div class="form-section-title"><span class="section-title-icon"></span>基本信息</div>
                <el-form label-width="100px">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="会议主题:">
                                <span>{{ selectedMeeting?.meetingTheme }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="主持人:">
                                <span>{{ selectedMeeting?.compere }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="会议室:">
                                <span>{{ selectedMeeting?.roomName }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="提交时间:">
                                <span>{{ moment(selectedMeeting?.submissionTime).format("YYYY-MM-DD HH:mm") }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="会议时间:">
                        <span>{{ moment(selectedMeeting?.beginTime).format("YYYY-MM-DD HH:mm") }} ~ {{
                            moment(selectedMeeting?.endTime).format("YYYY-MM-DD HH:mm") }}</span>
                    </el-form-item>

                    <el-form-item label="会议内容:">
                        <span>{{ selectedMeeting?.meetingContent }}</span>
                    </el-form-item>

                </el-form>
            </div>

            <div style="margin-top: 20px;">
                <div class="form-section-title"><span class="section-title-icon"></span>会议审批</div>
                <el-form label-width="100px" :model="ruleform" :rules="approvalRules" ref="approvalFormRef">
                    <el-form-item label="审批结果:" prop="result">
                        <span v-if="isViewingDetails">{{ selectedMeeting?.result == '1' ? '通过' :
                            (selectedMeeting?.result == '2'
                                ? '退回' : '') }}</span>
                        <el-radio-group v-else v-model="ruleform.result">
                            <el-radio-button label="1">通过</el-radio-button>
                            <el-radio-button label="2">退回</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="审批说明:" prop="approvalNotes">
                        <span v-if="isViewingDetails">{{ selectedMeeting?.approvalNotes }}</span>
                        <el-input v-else type="textarea" v-model="ruleform.approvalNotes"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <template #footer>
                <span class="dialog-footer" v-if="!isViewingDetails">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleConfirmApproval()">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import moment from "moment";
import { GetApproval, ApprovalMeet } from "@/Api/room";
import { ElMessage, ElDialog, ElDescriptions, ElDescriptionsItem, ElTag, ElRadioGroup, ElRadio, ElInput, ElButton, ElForm, ElFormItem, ElRow, ElCol, ElLink } from 'element-plus'; // 导入所需的 Element Plus 组件
import type { FormInstance, FormRules } from 'element-plus'; // 导入 FormInstance 和 FormRules 类型

const tableData = ref([]); // 表格数据

const searchForm = reactive({ // 查询表单数据
    state: '0',
    MeetingTheme: '',
    RoomName: '',
})

const dialogVisible = ref(false); // 控制对话框显示与隐藏
const selectedMeeting = ref<any>(null); // 当前选中的会议数据
const approvalFormRef = ref<FormInstance>(); // 审批表单的引用
const isViewingDetails = ref(false); // 是否是查看详细模式

const ruleform = reactive({ // 审批表单数据
    meetApprovalId: '',
    result: '', // 审批结果
    approvalNotes: '', // 审批说明
})

// 审批表单校验规则
const approvalRules = reactive<FormRules>({
    result: [
        { required: true, message: '请选择审批结果', trigger: 'change' },
    ],
    approvalNotes: [
        { required: true, message: '请输入审批说明', trigger: 'change' },
    ],
});

// 获取审批列表数据
const ApprovalInfo = async () => {
    const params = {
        state: searchForm.state, // 审批状态
        MeetingTheme: searchForm.MeetingTheme, // 会议主题
        RoomName: searchForm.RoomName, // 会议室名称
    }
    const response = await GetApproval(params);
    console.log(response);

    tableData.value = response.data.data;
}

// 处理查询按钮点击
const handleSearch = () => {
    ApprovalInfo(); // 执行查询
}

// 处理重置按钮点击
const handleReset = () => {
    searchForm.RoomName = '';
    searchForm.MeetingTheme = '';
    // 重置后执行查询
    ApprovalInfo();
}

// 处理会议审批链接点击
const handleApprove = (row: any) => {
    ruleform.meetApprovalId = row.meetApprovalId;
    selectedMeeting.value = row; // 设置当前选中的会议数据
    // 初始化 ruleform 数据
    ruleform.result = '1'
    ruleform.approvalNotes = row.approvalNotes || '';
    isViewingDetails.value = false; // 设置为审批模式
    dialogVisible.value = true; // 打开对话框
};

// 处理查看详细链接点击
const handleViewDetails = (row: any) => {
    console.log('Viewing Details:', row);
    selectedMeeting.value = row; // 设置当前选中的会议数据
    // 初始化 ruleform 数据用于只读显示
    ruleform.result = row.result || '';
    ruleform.approvalNotes = row.approvalNotes || '';
    isViewingDetails.value = true; // 设置为查看详细模式
    dialogVisible.value = true; // 打开对话框
};

// 处理对话框确定按钮点击
const handleConfirmApproval = () => {
    // 触发表单校验
    approvalFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            const params = {
                id: ruleform.meetApprovalId,
                state: ruleform.result,
                notes: ruleform.approvalNotes,
            }
            const response = await ApprovalMeet(params)
            if (response.data.code == 200) {
                ElMessage.success("审批成功!");
                dialogVisible.value = false; // 关闭对话框
                // 可选：审批后刷新表格数据
                ApprovalInfo();
            }
        } else {
            console.log('表单校验失败');
        }
    });
};

// 监听审批状态变化，自动刷新列表
watch(() => searchForm.state, () => {
    ApprovalInfo()
});

// 文档就绪时获取审批列表数据
onMounted(() => {
    ApprovalInfo()
});
</script>

<style scoped>
.user-list-container {
    background: #fff;
    padding: 2% 3%;
    border-radius: 0.5em;
}

.search-area {
    display: flex;
    gap: 10px;
    /* 调整间距 */
    margin-bottom: 20px;
    /* 在单选按钮下方添加空间 */
    align-items: center;
    background-color: #f9f9f9;
    /* 搜索区域的浅灰色背景 */
    padding: 15px;
    /* 添加内边距 */
    border-radius: 4px;
    /* 添加圆角 */
}

.search-area .el-input,
.search-area .el-date-picker {
    width: 180px;
    /* 调整宽度 */
}

.search-area .el-button--primary {
    background-color: #409eff;
    /* 蓝色查询按钮 */
    border-color: #409eff;
}

.search-area .el-button:not(.el-button--primary) {
    background-color: #fff;
    /* 重置按钮的白色背景 */
    color: #606266;
    border-color: #dcdfe6;
}

.el-table {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    /* 确保圆角生效 */
}

.el-table th.el-table__cell {
    background-color: #f2f2f2;
    /* 表头的浅灰色背景 */
    color: #333;
    font-weight: normal;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell {
    border-bottom: 1px solid #ebeef5;
}

.el-table__cell {
    padding: 10px 0;
}

.el-table .el-button--success {
    padding: 5px 10px;
    background-color: transparent !important;
    color: #67c23a !important;
    /* 绿色文本 */
    border: 1px solid #67c23a !important;
    /* 绿色边框 */
    border-radius: 4px;
}

.el-table__inner-wrapper::before {
    height: 0;
    /* 移除表格默认底部边框 */
}

.form-section-title {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 4px solid #409eff;
    /* 蓝色条 */
}
</style>